<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let关键字</title>
    <!-- 
        ES6中新增的用于声明变量的关键字。
        let声明的变量只在所处于的块级有效
        注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性
        不存在变量提升
        暂时性死区
     -->
</head>
<body>
    
</body>
<script type="text/javascript">
    /*
        let关键字就是用来声明变量的
        使用let关键字声明的变量具有块级作用域
        在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的
        防止循环变量变成全局变量
        使用let关键字声明的变量没有变量提升
        使用let关键字声明的变量具有暂时性死区特性
    */
            
    /* --------let关键字就是用来声明变量的-------- */
        // let a = 10;
        // console.log(a);
            
    /* --------使用let关键字声明的变量具有块级作用域-------- */
        // if (true) {
        // 	let b = 20;
        // 	console.log(b)
        // 	if (true) {
        // 		let c = 30;
        // 	}
        // 	console.log(c);
        // }
        // console.log(b)
            
    /* -------在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的--------- */
     
        // if (true) {
        // 	let num = 100;
        // 	var abc = 200;
        // }
        // console.log(abc);
        // console.log(num)
     
     
    /* -------防止循环变量变成全局变量--------- */
        // for (let i = 0; i < 2; i++) {}
        // console.log(i);
            
     
    /*-----使用let关键字声明的变量没有变量提升------*/
        // console.log(a);
        // let a = 100;
            
     
    /* -------使用let关键字声明的变量具有暂时性死区特性------- */
        // var num = 10
        // if (true) {
        //     console.log(num);
        //     let num = 20;
        // }
     
        // 经典面试题图解：此题的关键点在于每次循环都会产生一个块级作用域，
        // 每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）
        // 作用域下的i值。
        let arr = []
        // for(let i=0;i<2;i++){
        //     arr[i] = function(){
        //         console.log(i);
        //     }
        // }
        // arr[0]()
        // arr[1]()

        var arr1 = []
        for(var i=0;i<2;i++){
            arr1[i] = function(){
                console.log(i);
            }
        }
        arr1[0]()
        arr1[1]()
    </script>
</html>